<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        body{margin:0px;padding:0px;}
        ul{margin:px;padding:0px;list-style-type:none;}
    </style>
    <script src="js/jquery-2.1.1.js"></script>
    <script>

        var list = [{'id':2,'name':'北京大学'},{'id':2,'name':'上善若水'}];


        $(function(){

            onclick();
            $("#txt").bind("keyup",function(){
                    txtchange(0);
            });

        });

        //keyup事件
        function txtchange()
        {
            var textObj=$("#txt").val();
            var divObj=$("#div1").html();
            var array=[];

            //ul li
            var li = '';
            for(i in list){

                var tmp = list[i].name ;
                if(tmp.indexOf(textObj) != -1){
                    li += '<li data-sid="'+list[i].id+'">'+tmp+'</li>';

                }
            }

            $('#ul1').html(li);

//            with(divObj)
//            {
//                var ulHTML=divObj.match(/<[^>]*>/)[0];//拿到开始标签
//                val = ularray+ ""; //转为字符串
//
//                for(var i=0;i<ularray.length;i++)
//                {
//                    if(val.split(",")[i].indexOf(textObj)!==-1||flag) //分割成字符串数组
//                    {
//                        array[array.length]="<li><span>"+ularray[i]+"</span></li>";
//                    };
//                };//把新得到的集合放入数组
//
//                var liHtml = "";
//                $.each(array,function(item,val){
//                    liHtml += val;
//                });//去掉数组间逗号
//
//                divObj=ulHTML+liHtml+"</ul>";
//                $("#ul1").html(divObj);
//                onclick(); //让新得到的数组拥有点击功能
//            };
        };

        //span单击事件
        function onclick(){
            $('#ul1').on('click','li',function(){
                var oli = $(this);
                var otxt = (this).html();
                $("#txt").empty().val(otxt);
            });

        };
    </script>
</head>

<body >
<center>
    <form>
        <input id="txt" type="text" />
        自动提示
        <div id="div1">
            <ul id="ul1" >
            </ul>
        </div>
    </form>
</center>
</body>
</html>